<template>
    <ul class="child-ul-wrapper" :class="float">
        <li v-for="i in itemchildren" :key="i.name" class="child-li-wrapper">
            <div v-if="i.children && i.children.length > 0" class="has-child">
                <div class="parent-name btn-wrapper-simple">
                    <i :class="i.icoName ? i.icoName : ''" class="nav-icon-fontawe"></i>
                    <span class="nav-name-right">{{i.btnName}}</span>
                    <i class="icon"></i></div>
                <tree-child-component :itemchildren="i.children" @childhandler="fnHandler" :float="float" />
            </div>
            <div v-else>
                <div @click.stop="fnHandler(i)" class="no-child-btn btn-wrapper-simple">
                    <i :class="i.icoName ? i.icoName : ''" class="nav-icon-fontawe"></i>
                    <span class="nav-name-right">{{i.btnName}}</span>
                </div>
            </div>
        </li>
    </ul>
</template>
<script>
    export default {
        name: 'tree-child-component',
        props: ['itemchildren', 'float'],
        methods: {
            fnHandler (item) {
                this.$emit('childhandler', item)
            }
        }
    }
</script>
<style scoped>
    .float-status-1 {
        left: 100%;
        bottom: -1px;
        z-index: 10001
    }
    .float-status-2 {
        left: 100%;
        top: -1px;
        z-index: 10001
    }
    .float-status-3 {
        right: 100%;
        top: -1px;
        z-index: 10001
    }
    .float-status-4 {
        right: 100%;
        bottom: -1px;
        z-index: 10001
    }

    .child-ul-wrapper .has-child {
        padding: 5px 10px;
        position: relative;
    }
    li {
        list-style: none;
    }
    .parent-name .icon {
        position: absolute;
        display: block;
        top: 4px;
        right: 0;
        border-top: 4px solid transparent;
        border-left: 8px solid #111111;
        border-bottom: 4px solid transparent;
        border-right: 4px solid transparent;
    }

    .no-child-btn {
        padding: 5px 10px;
    }

    .child-ul-wrapper {
        background: #ffffff;
        position: absolute;
        display: none;
        border: 1px solid #e8e8e8;
        border-radius: 3px;
    }
    .child-li-wrapper:hover > .has-child > .child-ul-wrapper{
        display: block;
    }
    .context-menu-list:hover, .child-li-wrapper:hover {
        background: #2894f8;
    }

    .nav-icon-fontawe {
        position: absolute;
    }
    .nav-name-right {
        white-space: nowrap;
        display: block;
        margin: auto 20px;
    }
    .btn-wrapper-simple {
        position: relative;
        height: 16px;
        line-height: 16px;
    }
</style>


